<template>
	<div class="modal-container">
		<el-dialog title="换货发货" width="596px" custom-class="modal-record " :close-on-click-modal="false"
			:visible.sync="show" :before-close="on_before_close" :closed="on_closed">

			<div class="modal-inner">
				<div class="modal-ctx">
					<div class="input-box flex">
						<div class="label">物流公司</div>
						<div class="input-item">
							<el-select clearable="" filterable="" v-model="company_id" placeholder="请选择物流公司"
								@change="changeCompany">
								<el-option v-for="(item, index) in company_list" :key="index" :label="item.expressName"
									:value="item.id"></el-option>
							</el-select>
						</div>
					</div>

					<div class="input-box flex">
						<div class="label">快递单号</div>
						<div class="input-item">
							<el-input clearable type="text" v-model="form.expressOrder" placeholder="快递单号"> </el-input>
						</div>
					</div>

				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button type="" @click="show = false">取消</el-button>
				<el-button type="primary" @click="do_submit()">确认</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
	mapState
} from "vuex";

export default {
	name: "refund-audit-modal",
	components: {

	},
	data() {
		return {
			show: false,
			info: {

			},
			form: {
				expressNo: '',
				expressCompany: '',
				expressOrder: '',
			},
			company_list: [],
			company_id: ''
		};
	},
	computed: {},
	watch: {

	},
	created() {
		this.query_compnay()
	},
	methods: {
		init(row) {
			this.info = row
			this.show = true;
		},
		on_before_close() {
			this.show = false;
		},
		on_closed() {

		},

		query_compnay() {
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "setting_getExpressList",
					page: 1,
					pageNum: 100,
					source: '', //来源：0-快递鸟 1-快递100
				}
			}).then(res => {
				this.company_list = res.data.list
			})
		},
		changeCompany(value) {
			console.log('选择快递公司', value)
			let company_info = this.company_list.find(v => v.id == value)

			this.form.expressNo = company_info.expressNo;
			this.form.expressCompany = company_info.expressName;
		},


		do_submit() {
			// if (!this.form.invoiceAdmin) {
			// 	alertErr("请填写开票人");
			// 	return;
			// }
			this.$api({
				url: '/admin_service.php',
				method: 'get',
				data: {
					action: "refund_updateAfterSales",
					id: this.info.id,
					updateType: '5',
					...this.form
				}
			}).then(res => {
				if (res.code == 200) {
					this.$emit('confirm')
					this.show = false
					this.$message({
						message: res.msg,
						type: 'success'
					})
				} else {
					alertErr(res.msg)
				}
			})
		},


	},
};
</script>

<style scoped lang="less">
.upload-plus {
	width: 140px;
}

/deep/ .el-upload {
	display: block;
	width: 200px;
	margin: 0 auto;
	margin: 0;

	.empty {
		.flex-center();
	}
}

/deep/ .modal-record {
	// margin-top: 80px !important;


	.modal-inner {
		padding: 0;
	}

	.el-dialog__header {
		.flex-between();
		border-bottom: 1px solid #eee;
		background: #a98c4d;
		background: #f7f7f7;
		height: 60px;
		line-height: 60px;
		padding: 0 20px;
		font-size: 18px;
		color: #333;

		.el-dialog__title {
			color: #000;
		}

		.el-dialog__headerbtn {

			// top: 0;
			.el-dialog__close {
				color: #000;
				font-size: 20px;
				font-weight: bold;
			}
		}
	}

	.el-dialog__body {
		padding: 0;
	}

	.el-dialog__footer {
		text-align: center;



	}
}

.modal-ctx {
	padding: 30px 50px;
	max-height: 60vh;
	overflow-y: auto;
	border-bottom: 1px solid #ddd;

	.tip {
		margin-bottom: 20px;
		color: #444;
		font-size: 14px;
	}

	.input-box {
		margin-bottom: 15px;
		position: relative;

		&.flex {
			display: flex;
			align-items: flex-start;
			// align-items: center;

			.label {
				margin-bottom: 0;
			}
		}

		.label {
			min-width: 80px;
			// margin-right: 20px;
			margin-bottom: 20px;
			font-size: 14px;
			color: #6e7285;
		}

		.input-item {
			flex: 1;
			display: flex;
			align-items: center;


			.el-input {
				width: 220px;
				width: 100%;
			}

			.el-select {
				width: 100%;
			}
		}
	}
}

.upload-ctx {
	margin: 20px 0;
}

.btn-send {}
</style>